<template>
  <div style="width: 900px">
    <search @search="search"></search>
    <el-table
      :data="tableData"
      v-loading="isLoading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
    >
      <el-table-column prop="mobile" label="手机号" width="180"></el-table-column>
      <el-table-column prop="loginName" label="登陆名" width="180"></el-table-column>
      <el-table-column prop="role" label="角色" width="180"></el-table-column>
      <el-table-column prop="state" label="状态" width="180">
        <template slot-scope="scope">
          <el-tag type="success" v-if="scope.row.state==='已通过'">{{scope.row.state}}</el-tag>
          <el-tag type="danger" v-else>{{scope.row.state}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.row._id)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.row._id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      layout="prev, pager, next"
      :total="total"
      :current-page="condition.page"
      :page-size="condition.limit"
      @current-change="pageChange"
    ></el-pagination>
  </div>
</template>
<script>
import search from "@/components/Search";
export default {
  components: {
    search
  },
  created() {
    this.$store.commit("users/setCondition", {
      page: 1
    });
    this.$store.dispatch("users/saveData");
  },
  computed: {
    tableData() {
      return this.$store.state.users.data;
    },
    total() {
      return this.$store.state.users.total;
    },
    condition() {
      return this.$store.state.users.condition;
    },
    isLoading() {
      return this.$store.state.users.isLoading;
    }
  },
  methods: {
    handleDelete: function(id) {
      this.$confirm("此操作将永久删除该用户, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
            onClose: () => {
              this.$store.dispatch("users/deleteUser", id);
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    handleEdit: function(id) {
      this.$router.push({
        name: "eidtUser",
        params: {
          id
        }
      });
    },
    pageChange: function(newPage) {
      this.$store.commit("users/setCondition", {
        page: newPage
      });
      this.$store.dispatch("users/saveData");
    },
    search: function(key) {
      this.$store.commit("users/setCondition", {
        key
      });
      this.$store.dispatch("users/saveData");
    }
  }
};
</script>